<template>
  <div>
    <ul>
<!--      跳转路由并携带query参数，to的字符串的写法-->
      <li v-for="m in messageList" :key="m.id">
<!--        <router-link  :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>-->

        <!--      跳转路由并携带query参数，to的对象的写法-->
        <router-link  :to="{
          path:'/home/message/detail',
          query:{
            id:m.id,
            title:m.title
          }
        }">
          {{m.title}}
        </router-link>
        <br>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: "HomeMessage",
      data(){
          return{
            messageList:[
              {id:"001",title:"消息001"},
              {id:"002",title:"消息002"},
              {id:"003",title:"消息003"},
            ]
          }
      }
    }
</script>

<style scoped>
.active{
  color: black;
}
</style>
